/*
 *
 */
EVENT = {
    STEP_CLICK: 'wizard:stepclick',
    CHANGE: 'wizard:change',
    CHANGED: 'wizard:changed',
    FINISHED: 'wizard:finished'
};
var ACTIVE_CLASS = 'on',
    FIRST_CLASS = 'first',
    LAST_CLASS = 'last';
function Wizard(element, opt) {
    var me = this;

    me.$steps = $('#fuelux-wizard .wizard-steps li');
    me.$stepPanes = $('#step-container.step-content .step-pane');
    me.$steps = $('.tab-wrap .tab li');
    me.$stepPanes = $('.tab-ct-wrap .tab1');

    me.first();
    me.$steps.on('click', 'complete', $.proxy(me.stepclicked, this));
}

Wizard.prototype = {
    constructor: Wizard,
    _goto: function (step, trigger) {
        var me = this,
            $steps = me.$steps,
            $vsteps = $steps.filter(':visible'),
            $stepPanes = me.$stepPanes,
            $step, i;

        step == 'string' === typeof step ? parseInt(step) : step;
        // 将要显示的节点
        $step = 'number' === typeof step ? $steps.eq(step - 1) : $(step);
        if (1 > $step.length) {
            return false;
        }

        i = $steps.index($step);

        $steps.removeClass(FIRST_CLASS).removeClass(LAST_CLASS).removeClass(ACTIVE_CLASS);
        $vsteps.first().addClass(FIRST_CLASS);
        $vsteps.last().addClass(LAST_CLASS);
        $step.addClass(ACTIVE_CLASS);

        $stepPanes.removeClass('first').removeClass('last').removeClass(ACTIVE_CLASS).eq(i).addClass(ACTIVE_CLASS);
        $stepPanes.first().addClass('first');
        $stepPanes.last().addClass('last');

        trigger && $steps.trigger(EVENT.CHANGED);
    },
    first: function () {
        this._goto(this.$steps.filter(':visible:first'));
    },
    last: function () {
        this._goto(this.$steps.filter(':visible:last'));
    },
    next: function () {
        var me = this,
            $steps = me.$steps,
            $vsteps = $steps.filter(':visible'),
            $active = $steps.filter('.' + ACTIVE_CLASS + ':first'),
            $next = $active.nextAll(':visible:first'),
            step = $steps.index($active) + 1,
            vstep = $vsteps.index($active) + 1;

        // 已经是最后一个
        if ($next.length < 1) {
            // 递归
            // $next = $vsteps.first();
            me.finished();
            return;
        }

        var cEvent = $.Event(EVENT.CHANGE);
        me.$steps.trigger(cEvent, {
            step: step,
            vstep: vstep,
            direction: 'next'
        });
        if (cEvent.isDefaultPrevented()) {
            return
        }

        me._goto($next);
    },
    previous: function () {
        var me = this,
            $steps = me.$steps,
            $vsteps = $steps.filter(':visible'),
            $active = $steps.filter('.' + ACTIVE_CLASS + ':first'),
            $prev = $active.prevAll(':visible:first'),
            step = $steps.index($active) + 1,
            vstep = $vsteps.index($active) + 1;

        // 已经是第一个
        if ($prev.length < 1) {
            return;
            // 递归
            // $prev= $vsteps.last();
        }

        var cEvent = $.Event(EVENT.CHANGE);
        me.$steps.trigger(cEvent, {
            step: step,
            vstep: vstep,
            direction: 'previous'
        });
        if (cEvent.isDefaultPrevented()) {
            return
        }


        me._goto($prev);
    },
    stepclicked: function (event) {
        var me = this,
            $steps = me.$steps,
            $vsteps = $steps.filter(':visible'),
            $target = $(event.currentTarget),
            $active = $vsteps.filter('.' + ACTIVE_CLASS + ':first'),
            c = $steps.index($active) + 1,
            v = $vsteps.index($active) + 1,
            i = $steps.index($target) + 1,
            cEvent = $.Event(EVENT.CHANGE);

        $steps.trigger(cEvent, {
            step: c,
            vstep: v
        });

        if (cEvent.isDefaultPrevented()) {
            return
        }
        me._goto(i);
    },
    finished: function () {
        this.$steps.trigger(EVENT.FINISHED, {});
    }
};

$.fn.wizard = function (m, args) {
    var v, $self = this.each(function () {
        var j = $(this);
        var wizard = j.data("wizard");
        var opts = typeof m === "object" && m;
        if (!wizard) {
            j.data("wizard", (wizard = new Wizard(this, opts)))
        }
        if (typeof m === "string") {
            v = wizard[m](args)
        }
    });
    return (v === undefined) ? $self : v;
};
$.fn.wizard.defaults = {};
$.fn.wizard.Constructor = Wizard;

sty = document.createElement('style');
sty.type = 'text/css';
sty.textContent = '.tab1 {display:none !important;} .on{ display: block !important; }';
document.body.appendChild(sty);
w = new Wizard();
w.$steps.first().on('wizard:change', function (event, step) {
    console.log(step)
//        return false;
});
